<template>
  <div>
    <h1 v-color="color1">指令的值1测试</h1>
    <h1 v-color="color2">指令的值2测试</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color1: 'red',
      color2: 'blue'
    }
  },
  //2.局部注册指令
  directives: {
    color: {
      //1.inserted 提供的是元素被添加到页面中时的逻辑
      inserted(el, binding) {
        console.log(el, binding.value);
        el.style.color = binding.value;
      },
      //2.update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
      update(el, binding) {
        console.log('指令的值修改了');
        el.style.color = binding.value;
      }
      //小坑需要注意下：update并不是指令的值修改的时候触发
      //而是只要使用了这个指令的组件，在其所在的虚拟dom发生更新时，都会触发
      //从控制台log了两次就可以看出来，因为v-color使用在了两个标签上
      //具体可以去一下Vue官网对自定义指令中钩子函数update的解释
    }
  }
}
</script>

<style>
</style>